<template>
    <div>
        <div class="container">
            <div class="margin-bottom">
                <span class="count" v-for="item in infoData">
                    <el-tag size="large">{{item.name+": "+"&nbsp"+item.value}}</el-tag>
                </span>
                <span class="count" v-for="item in levelData">
                        <el-tag size="large">{{item.name+": "}}
                        <el-tag :color="item.color" effect="dark" size="small">{{ item.count }}</el-tag>
                        </el-tag>
                </span>
                <span class="margin-left">
                <el-button type="primary" size="small" @click="popUp">导出</el-button>
                </span>
            </div>

<!--            <el-row class="margin-bottom">-->

<!--                <el-col :span="3" style="float:right">-->

<!--                </el-col>-->
<!--            </el-row>-->
<!--            <el-row class="margin-top margin-bottom">-->
<!--                <el-col :span="22">-->
<!--&lt;!&ndash;                    <el-descriptions class=" level" size="small" :column="4">&ndash;&gt;-->
<!--&lt;!&ndash;                        <el-descriptions-item class="margin-right" v-for="item in levelData" :label="item.name">&ndash;&gt;-->
<!--&lt;!&ndash;                            <el-tag :color="item.color" effect="dark" size="small">{{ item.count }}</el-tag>&ndash;&gt;-->
<!--&lt;!&ndash;                        </el-descriptions-item>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-descriptions>&ndash;&gt;-->

<!--                </el-col>-->
<!--                <el-col :span="2" style="float:right">-->

<!--                </el-col>-->
<!--            </el-row>-->

            <el-row class="margin-bottom">
                <el-card class="box-card" v-for="patient in patientData">
                    <template #header>
                        <div class="card-header">
							<el-tag size="mini" style="font-size: 15px">{{ patient.queNumber }}床 - {{ patient.room }}房</el-tag>
							<span>{{ patient.name }}</span>
                        </div>
                    </template>
                    <div v-if="patient.name !== null" class="text item">{{ patient.age }}岁 {{ patient.gender }} {{ patient.day }}天</div>
                    <text class="text" v-for="i in patient.condition">{{ i }}&nbsp;</text>
                </el-card>
            </el-row>
        </div>

    </div>
</template>

<script>
import {computed, ref} from "vue";
import {useRouter} from "vue-router";
import {useStore} from "vuex";

export default {
    name: "screen",
    setup() {
        const store = useStore();
        const router = useRouter();
        store.commit('refresh')
        //弹出窗口 改变路由
        const popUp = () => {
            const {href} = router.resolve({
                path: '/screenBig'
            });
            window.open(href, "_blank");
        };
        
    const infoData = computed(() => store.state.infoData)
        return {
            infoData:computed(() => store.state.infoData),
            levelData:computed(() => store.state.levelData),
            patientData:computed(() => store.state.patientData),
            popUp,
        };
    },
};
</script>


<style scoped>

.count{
    display:inline-block;
    font-size: 17px;
    margin-left:10px;
    margin-right:10px;
}

.el-tag{
    font-size: 18px;
}

.margin-left{
    margin-left: 20px;
}

:deep(.el-descriptions__body table td){
    width:140px;
}

:deep(.el-tag--dark) {
    border-color: white;
}

.margin-bottom {
    margin-bottom: 20px;
}

.margin-top {
    margin-top: 10px;
}

.box-card {
    width:220px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.level {
    width: 50%;
}

.box-card:hover {
    margin-top: -5px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
	font-size: 1em;
}

.text {
    font-size: 13px;
}
</style>